<template>
  <div class="news">
    <Header></Header>
    <div>
      <img src="../../../public/header.png" alt="" />
    </div>
    <div class="main">
      <div class="news_main">
        <router-view />
      </div>
      <div class="this_user" v-if="userModule">
        <div class="user_mes">
          <div class="photo" @click="userRoom(userData.id)">
            <img src="../../assets/img/logo.png" alt="" />
          </div>
          <div>
            <h4 @click="userRoom(userData.u_id)">{{ userData.name }}</h4>
            <el-button type="primary" size="small">关注</el-button>
            <el-button type="success" size="small" @click="openLeaveWord()">发消息</el-button>
          </div>
        </div>
        <div class="other_list">
          <h4>他的其他投稿</h4>
          <el-tabs type="border-card">
            <!-- <el-tab-pane label="资讯"
              ><ul class="list_main">
                <li
                  v-for="listData in nes"
                  :key="listData.id"
                  @click="goContribute(listData.id, 1)"
                >
                  <i @click="newsParticulars(listData.id, userData.u_id)">{{
                    listData.title
                  }}</i
                  ><span>{{ listData.time }}</span>
                </li>
              </ul></el-tab-pane
            > -->
            <el-tab-pane label="文章"
              ><ul class="list_main">
                <li v-if="article.length==0" class="null">暂无文章</li>
                <li
                  v-for="listData in article"
                  :key="listData.id"
                >
                  <i @click="articleParticulars(listData.id, userData.u_id)">{{ listData.title }}</i
                  ><span>{{ listData.time }}</span>
                </li>
              </ul></el-tab-pane
            >
            <el-tab-pane label="视频"
              ><ul class="list_main">
                <li v-if="video.length==0" class="null">暂无文章</li>
                <li
                  v-for="listData in video"
                  :key="listData.id"
                >
                  <i @click="videoParticulars(listData.id, userData.u_id)">{{ listData.title }}</i
                  ><span>{{ listData.time }}</span>
                </li>
              </ul></el-tab-pane
            >
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog title="写留言" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="留言">
            <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelWriteLeaveWord">取 消</el-button>
          <el-button type="primary" @click="writeLeaveWord()">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import Header from "../../components/Header.vue";
export default {
  data() {
    return {
      userData: {},
      nes: [
        { id: 1, title: "资讯喜讯啦啦啦啦啦", time: "2022/3/20" },
        { id: 2, title: "资讯喜讯啦啦啦啦啦", time: "2022/3/20" },
        { id: 3, title: "资讯喜讯啦啦啦啦啦", time: "2022/3/20" },
      ],
      article: [],
      video: [],
      dialogFormVisible: false,
      form:{
          leaveWord:''
      },
      userModule:true
    };
  },
  components: { Header },
  created(){
   this.$route.query.writerID?this.userModule= true:this.userModule= false;
   if(this.$route.query.writerID){
    this.getUserDatas()
   }
  },
  methods: {
    // goContribute(id, type) {
    //   console.log(id, type);
    // },
    getUserDatas(){
      var writerID = this.$route.query.writerID;
      axios.post(`http://localhost:3000/getUserDatas`,{writerID}).then((ret) => {
        console.log(ret.data);
        this.userData=ret.data.userData
        this.article=ret.data.article
        this.video=ret.data.video
      })
    },
    userRoom(id) {
      this.$router.push({
        path: "/UserRoom",
        query: { userID: id },
      });
    },
    newsParticulars(id1, id2) {
      this.$router.push({
        path: "/Details/news",
        query: { newsID: id1, writerID: id2 },
      });
    },
    articleParticulars(id1,id2){
      this.$router.push({
        path: "/Details/article",
        query: { article: id1, writerID: id2 },
      });
    },
    videoParticulars(id1,id2){
      this.$router.push({
        path: "/Details/video",
        query: { video: id1, writerID: id2 },
      });
    },
    //回复消息
    cancelWriteLeaveWord() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
    openLeaveWord() {
      this.dialogFormVisible = true;
    },
    writeLeaveWord() {
      if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "回复不能为空！！",
          type: "error",
        });
      } else {
        var myDate = new Date();
        var time = myDate.toLocaleString();
        var timestamp = (Date.parse(myDate) + "").substring(0, 10);
        axios
          .post(`http://localhost:3000/information/writeLeaveWord`, {
            w_id: JSON.parse(localStorage.getItem("token")||'{}').u_id,
            w_main: this.form.leaveWord,
            w_type: 3,
            w_to: this.user.u_id,
            time,
            timestamp,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "回复成功",
                type: "success",
              });
              this.cancelWriteLeaveWord();
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.main {
  display: flex;
  position: relative;
  padding: 20px 5% 20px 10%;
  background-color: #f5f5f5;
}
.news_main {
  width: 80%;
  min-height: 1000px;
  margin: 0 10px;
  background-color: #fff;
}
.this_user {
  width: 30%;
}
.this_user > div {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
}
.user_mes {
  display: flex;
}
.user_mes h4 {
  padding: 10px;
  cursor: pointer;
  font-weight: 700;
}
.photo {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #dcdfe6;
}
.other_list h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}
.other_list ul li {
  font-size: 14px;
  color: #303133;
  padding: 10px 5px;
  cursor: pointer;
}
.other_list ul li:hover {
  color: #409eff;
}
.other_list ul li > span {
  color: #606266;
  float: right;
  font-size: 12px;
}
.other_list ul li > i {
  width: 200px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_main {
  height: 500px;
  overflow-y: scroll;
}
.null{
  text-align: center;
}
</style>
